<template>
  <div class="index-floor row between">
    <div class="left">
      <el-carousel :interval="5000" arrow="always">
        <!-- <el-carousel-item v-for="item in 4" :key="item">
          <h3>{{ item }}</h3>
        </el-carousel-item> -->
        <el-carousel-item v-for="url in urls" :key="url">
          <el-image
            style="width: 100%; height: 100%"
            :src="url"
            :fit="'fill'"
          ></el-image
        ></el-carousel-item>
      </el-carousel>
    </div>
    <el-card class="right">
      <div slot="header" class="card-header">
        <span class="font20">新闻资讯</span>
        <el-button style="float: right; padding: 3px 0" type="text"
          >更多</el-button
        >
      </div>
      <div>
        <ul>
          <li
            @click="
              $router.push({
                name: 'articalDetail',
                params: { content: item.content, category: item.category },
              })
            "
            v-for="(item, index) in newsList"
            :key="index"
          >
            <span>{{ item.title }}</span>
          </li>
        </ul>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "indexFloor",
  props: {
    newsList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  model: {
    prop: "newsList",
    event: "changeValue",
  },
  data() {
    return {
      urls: [
        "http://scsbk.ycfuture.cn/static/uploads/res/cmsfile/202011/20201112113813_1566.png",
        "http://scsbk.ycfuture.cn/static/uploads/res/cmsfile/202011/20201126223400_5309.png",
        "http://scsbk.ycfuture.cn/static/uploads/res/cmsfile/202107/20210712130644_8333.png",
        "http://scsbk.ycfuture.cn/static/uploads/res/cmsfile/202012/20201207130121_6672.png"
      ],
    };
  },
};
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  text-align: center;
  margin: 0;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.index-floor {
  min-height: 300px;
  box-sizing: border-box;
}
.index-floor .left {
  width: 36vw;
}
.index-floor .right {
  width: 20vw;
}
.index-floor .right .card-header {
}
.index-floor .right .card-header:before,
.index-floor .right .card-header:after {
  display: table;
  content: "";
}
.index-floor .right .card-header:after {
  clear: both;
}
::v-deep .el-card__body {
  padding: 0.104167rem 0.104167rem 0 0.104167rem;
}
ul {
  padding-left: 0px;
}
ul li {
  font-size: 16px;
  line-height: 28px;
  background: url(http://scsbk.ycfuture.cn/templates/system/green/img/icon001.png)
    no-repeat left center;
  padding: 5px 20px 5px 25px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
  color: #404040;
}
</style>